<template>
  <view class="wrap">
    <uv-swiper :list="list" indicator indicatorMode="line" height="420rpx" circular></uv-swiper>
    <view>
      <view class="py-[32rpx] box-border">
        <CommonTitle title="游玩攻略" @toNavigate="toNavigate" />
        <scroll-view scroll-x="true" class="scroll-view">
          <view
            class="w-[296rpx] h-[246rpx] relative pt-[30rpx] mr-[28rpx] inline-block box-border"
            @click="toDetail"
          >
            <view class="rounded-[20rpx] w-full bg-[#F9F06C] p-[20rpx] box-border">
              <view>
                <view
                  class="w-[100rpx] h-[68rpx] text-[#1A202C] text-[24rpx] font-semibold text-wrap"
                  >特色美食推荐</view
                >
                <view
                  class="font-normal mt-[16rpx] text-[18rpx] w-[100rpx] h-[34rpx] rounded-[60rpx] text-center border border-[#1A202C]"
                  >23人推荐</view
                >
                <view class="text-[#1A202C] text-[24rpx] mt-[20rpx] font-normal"
                  >街巷探春！等你来探索～</view
                >
              </view>
            </view>
            <view class="absolute imgContainer overflow-hidden right-0 top-0 w-[174rpx] h-[174rpx]">
              <image src="/static/pic.jpg" mode="aspectFill"></image>
            </view>
          </view>
          <view
            class="w-[296rpx] h-[246rpx] relative pt-[30rpx] mr-[28rpx] inline-block box-border"
          >
            <view class="rounded-[20rpx] w-full bg-[#C5E758] p-[20rpx] box-border">
              <view>
                <view
                  class="w-[100rpx] h-[68rpx] text-[#1A202C] text-[24rpx] font-semibold text-wrap"
                  >特色美食推荐</view
                >
                <view
                  class="font-normal mt-[16rpx] text-[18rpx] w-[100rpx] h-[34rpx] rounded-[60rpx] text-center border border-[#1A202C]"
                  >23人推荐</view
                >
                <view class="text-[#1A202C] text-[24rpx] mt-[20rpx] font-normal"
                  >街巷探春！等你来探索～</view
                >
              </view>
            </view>
            <view class="absolute imgContainer overflow-hidden right-0 top-0 w-[174rpx] h-[174rpx]">
              <image src="/static/pic.jpg" mode="aspectFill"></image>
            </view>
          </view>
          <view
            class="w-[296rpx] h-[246rpx] relative pt-[30rpx] mr-[28rpx] inline-block box-border"
          >
            <view class="rounded-[20rpx] w-full bg-[#8A6DF1] p-[20rpx] box-border">
              <view>
                <view
                  class="w-[100rpx] h-[68rpx] text-[#1A202C] text-[24rpx] font-semibold text-wrap"
                  >特色美食推荐</view
                >
                <view
                  class="font-normal mt-[16rpx] text-[18rpx] w-[100rpx] h-[34rpx] rounded-[60rpx] text-center border border-[#1A202C]"
                  >23人推荐</view
                >
                <view class="text-[#1A202C] text-[24rpx] mt-[20rpx] font-normal"
                  >街巷探春！等你来探索～</view
                >
              </view>
            </view>
            <view class="absolute imgContainer overflow-hidden right-0 top-0 w-[174rpx] h-[174rpx]">
              <image src="/static/pic.jpg" mode="aspectFill"></image>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="py-[20rpx] box-border">
        <CommonTitle title="优惠/发现" @toNavigate="toNavigatefind" />
        <view class="px-[32rpx] px-[24rpx]">
          <view class="w-full h-[50rpx] mt-[24rpx] mb-[28rpx] flex items-center">
            <view
              v-for="(item, index) in lists"
              :key="index"
              class="mr-[24rpx] rounded-[200rpx] text-center text-[24rpx] py-[8rpx] px-[24rpx] box-border"
              :class="index === checked ? 'sel' : 'noSel'"
              @click="check(item, index)"
              >{{ item.text }}</view
            >
          </view>
        </view>
        <view class="px-[32rpx] pb-[200rpx] box-border flex items-center justify-between flex-wrap">
          <view
            v-for="item in 4"
            :key="item"
            class="w-[332rpx] h-[356rpx] bg-[#ffffff] mb-[20rpx] rounded-[8rpx]"
            @click="toPackageDetail"
          >
            <view class="w-full h-[236rpx]">
              <image src="/static/image.png" class="w-full h-full" mode="aspectFill"></image>
            </view>
            <view class="p-[16rpx] box-border">
              <view class="text-[#1A202C] text-[28rpx] font-normal">特色美食双人套餐</view>
              <view class="flex items-center justify-between">
                <view class="font-medium">
                  <text class="text-[20rpx]">￥</text>
                  <text>128.00</text>
                </view>
                <view class="flex items-center">
                  <text class="icon-[streamline--hearts-symbol] text-[24rpx]"></text>
                  <text class="text-[#666666] text-[24rpx] font-normal ml-[8rpx]">12</text>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
  <cc-myTabbar :tabBarShow="0"></cc-myTabbar>
</template>

<script setup>
import { computed, ref } from "vue"
import CommonTitle from "/components/commonTitle/CommonTitle.vue"
const list = computed(() => [
  "https://cdn.uviewui.com/uview/swiper/swiper3.png",
  "https://cdn.uviewui.com/uview/swiper/swiper2.png"
])

const toDetail = () => {
  uni.navigateTo({
    url: "/pages/strategyDetails/strategyDetails"
  })
}
const toPackageDetail = () => {
  uni.navigateTo({
    url: "/pages/packageDetails/packageDetails"
  })
}

const toNavigate = () => {
  uni.navigateTo({
    url: "/pages/strategy/strategy"
  })
}
const toNavigatefind = () => {
  console.log("执行2")
}
const checked = ref(0)
const check = (item, index) => {
  checked.value = index
}

const lists = ref([
  {
    text: "热门推荐",
    value: 0
  },
  {
    text: "美食热榜",
    value: 1
  },
  {
    text: "特色体验",
    value: 2
  },
  {
    text: "必打卡",
    value: 3
  }
])
</script>

<style lang="scss" scoped>
.scroll-view {
  width: 100%;
  height: 246rpx; /* 固定高度 */
  white-space: nowrap; /* 防止换行 */
  margin-top: 24rpx;
  margin-left: 32rpx;
  padding-right: 32rpx;
  box-sizing: border-box;
}
.imgContainer {
  image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
  }
}
.noSel {
  background-color: #fff;
  color: #666666;
}
.sel {
  background-color: #b3e757;
  color: #fff;
}
</style>
